<template>
    <div class="goodsInfo-container">
        <!--动画球-->
        <transition
                @before-enter="beforeEnter"
                @enter="enters"
                @after-enter="afterEnter"
        >
            <div ref="ball" class="ball" v-show="ballflag"></div>
        </transition>

        <!-- 商品banner区域 -->
        <div class="mui-card">
            <div class="mui-card-content">
                <swipes :banner-list="imageArr" :is-full="false"></swipes>
            </div>
        </div>
        <!-- 商品购买区域 -->
        <div class="mui-card">
            <div class="mui-card-header">商品的名称标题</div>
            <div class="mui-card-content">
                <div class="middle-content">
                    <p class="price">市场价:<del>￥{{this.obj.marketPrice}}</del>&nbsp;&nbsp;销售价:<span class="now-price">￥{{this.obj.sellPrice}}</span></p>
                    <p>购买数量: &nbsp;&nbsp;<num-box @getCount="getSelectCount"></num-box> </p>
                    <p>
                        <mt-button type="primary">立即购买</mt-button>
                        <mt-button type="danger" @click="ballChange">加入购物车</mt-button>
                    </p>
                </div>
            </div>
        </div>
        <!-- 商品参数区域 -->
        <div class="mui-card">
            <div class="mui-card-header">{{this.obj.title}}</div>
            <div class="mui-card-content">
                <div class="mui-card-content-inner">
                    <p>商品货号：{{this.obj.goodNumber}}</p>
                    <p>库存情况：{{this.obj.repertory}}</p>
                    <p>上架时间：{{Date(this.obj.time) | FFDateFormatter}}</p>
                </div>
            </div>
            <div class="mui-card-footer">
                <mt-button type="primary" size="large" plain @click="goDesc(id)">图文介绍</mt-button>
                <mt-button type="danger" size="large" plain @click="goComment(id)">商品评论</mt-button>
            </div>
        </div>

    </div>
</template>

<script>

import swipes from "../generalComponents/Swipe.vue"
import numBox from "../generalComponents/Goodinfo-numberBox.vue"
import {Toast} from 'mint-ui'
export default {

    data () {
        return {
            imageArr:null,
            id: this.$route.params.id,
            obj: {},
            ballflag:false,
            selectCount:1
        }
    },
    created () {
        this.acquireImageData();
        this.acquireGoodInfo()
    },
    methods: {
        acquireImageData () {
            this.$http.get('http://rap2api.taobao.org/app/mock/149003/home/thumbs/?id=' + this.id)
                .then(result => {
                    let dic = result.body;
                    if (parseInt(dic["status"]) === 200) {
                        this.imageArr = dic["list"];
                        this.imageArr.forEach(item=>{
                            item.clickUrl = item.src;
                            item.image = item.src;
                        })
                    }
                })
        },
        acquireGoodInfo () {
            this.$http.get('http://rap2api.taobao.org/app/mock/149003/goodInfomation?id=' + this.id)
                .then(result => {
                    let dic = result.body
                    if (dic["status"] === 200) {
                        this.obj = dic['info']
                    }else {
                        Toast('数据请求失败')
                    }
                })
        },
        goComment (id) {
            this.$router.push({name:"GoodsComment", params: {id}});
        },
        goDesc (id) {
            this.$router.push({name:"GoodsDesc", params: {id}});
        },
        ballChange () {
            this.ballflag = !this.ballflag
        },
        beforeEnter (el) {
            el.style.transform = "translate(0, 0)"
        },
        enters (el, done) {
            /* getBoundingClientRect 元素相对于视窗的位置集合 */
            let ori = this.$refs.ball.getBoundingClientRect();
            let tar = document.getElementById('car-badge').getBoundingClientRect();
            let xDis = tar.left - ori.left;
            let yDis = tar.top - ori.top;
            el.offsetWidth;
            el.style.transform =  `translate(${xDis}px, ${yDis}px)`
            el.style.transition = 'all 1s cubic-bezier(0,.33,.05,.65)';
            done();
        },
        afterEnter () {
            this.ballflag = !this.ballflag
        },
        getSelectCount (count) {
            // 事件调用机制
            this.selectCount = count;
            console.log('选择的数量是：' + count);
        }
    },
    components: {
        swipes,
        numBox
    }
}

</script>

<style lang="scss" scoped>
    .price {
        .now-price {
            color: red;
            font-size: 16px;
            font-weight: bold;
        }
    }

    .mui-card-header, .mui-card-footer {
        flex-direction: column;
        button {
            margin-bottom: 10px;
        }
    }

    .mui-card {
        .mui-card-content {
            .middle-content {
                padding: 15px;
            }
        }
    }
    .ball {
        width: 15px;
        height: 15px;
        background-color: red;
        border-radius: 50%;
        position: absolute;
        z-index: 99;
        top: 360px;
        left: 146px;
    }
</style>
